Innovación y Desarrollo Para El Futuro
2-8-2021
Ayudas en C# y Java
Capacitación.
Versión #1
Billy Jeshua Sican Matias
Innovación y Desarrollo Para El Futuro
Contenido
General.................................................................................................................................... 1
Ayudas .................................................................................................................................... 2
Ayudas en C# ....................................................................................................................... 16
Ayudas en Java ..................................................................................................................... 19
Página | 1
Innovación y Desarrollo Para El Futuro
General
Para esta capacitación vamos a aprender cómo realizar ayudas con el programa de HTML
Help Workshop, las cuales serán de mucha ayuda para los requerimientos que se les solicita
en sus proyectos tanto para Java como C#.
Lo que vamos a necesitar seria lo siguiente:
- HTML Help Workshop → Para generar las ayudas
Página | 2
Innovación y Desarrollo Para El Futuro
Ayudas
Primeramente, vamos a instalar el HTML HELP WORKSHOP, una vez instalado podemos
empezar a realizar la ayuda correspondiente.
Como ejemplo vamos a tomar los siguientes archivos. Ver figura 1.
Figura 1, Archivos a utilizar.
Para poder realizar las ayudas, vamos a convertir de PDF a HTML, para ello vamos a utilizar
el servicio de una página web (Convertir PDF a HTML (Online y Gratis) — Convertio) Ver
figura 2 y 3.
Figura 2, Convertidor de PDF a HTML.
Figura 3, Archivos HTML.
Página | 3
Innovación y Desarrollo Para El Futuro
Una vez con los archivos HTML los vamos a colocar en una carpeta, el nombre de la carpeta
en este caso será “Ayudas-Capacitación”. Vamos a empezar un nuevo proyecto con el HTML
HELP WORKSHOP, vamos a “File → New” y esto nos desplegara una nueva ventana y ahí
vamos a escoger la opción de “Project”. Ver figura 4.
Figura 4, Creando un nuevo proyecto.
En la primera ventana que nos sale le damos siguiente y no tocamos nada, Ver figura 5.
Figura 5, Nuevo Proyecto
En la ventana que tiene como nombre “New Project – Destination”, vamos a darle al botón
“Browse…” y aquí vamos a buscar la carpeta que creamos.
Página | 4
Innovación y Desarrollo Para El Futuro
Una vez dentro de la carpeta, vamos a asignarle un nombre al archivo “.hhp”. en este caso lo
vamos a llamar “AyudasCapacitacion”. Una vez asignado el nombre damos en “Abrir”. Ver
figura 6.
Figura 6, Creación Del archivo HHP.
Presionamos siguiente y se nos abrirá una nueva ventana llamada “New Project – Existing
Files”, en esta ventana marcaremos la opción “HTML files (.htm). Ver figura 7.
Figura 7, Ventaja Existing Files.
Página | 5
Innovación y Desarrollo Para El Futuro
Una vez marcada esta casilla, damos en siguiente, en la siguiente ventana “New Project –
HTML Files” damos en el botón siguiente, y por último vamos a dar finalizar.
Se nos desplegara una columna en la parte izquierda de la ventana.
Como siguiente pago vamos a añadir los archivos HTML, para ellos presionamos el botón
“Add/Remove topic Files”. Ver figura 8.
Figura 8, Botón agregar.
Al presionarlo se nos desplegara una nueva ventana la cual debemos presionar el botón de
“Add…”, el cual al momento de presionarlo nos desplegara el explorador de archivos en
donde buscaremos los archivos HTML que se encuentran en nuestra carpeta “Ayudas-
Capacitación”. Los seleccionamos todos y le damos en abrir. Y como paso final le damos en
el botón “OK”. Ver figura 9.
Página | 6
Innovación y Desarrollo Para El Futuro
Figura 9, Archivos HTML agregados.
Continuando con la creación de ayuda, presionamos la pestaña “Contents”. Ver figura 10”
Figura 10, ubicación del botón Contents.
Nos desplegara una nueva ventana la cual se llama “Table of Contents Not Specified”, En
esta ventada nos aparecerá dos opciones la primera y la que está marcada por defecto “Create
a new Contents File”, y la segunda “Open an existing contents file”. Ver figura 11, dejamos
la primera opción marcada y damos “OK”.
Figura 11, Ventana Table Contents.
Página | 7
Innovación y Desarrollo Para El Futuro
Al momento de darle en el botón “OK”, se nos desplegara el explorador de archivos, en la
cual vamos a ubicarnos en la carpeta que designamos para las ayudas. Dentro de la carpeta
vamos a darle un nombre para el archivo “.hhc”, en este caso le vamos a dar el nombre de
“Ayudas”. Y le damos en Guardar.
Para continuar vamos a crear carpetas para ir guardando y ordenando las ayudas
correspondientes. En este caso vamos a crear 3 carpetas las cuales se llamarán “General”,
“ConexionC” y ConexionJAVA”. Ver figuras 1213. Al momento de presionar y agregar la
primera carpeta, al momento de agregar otra carpeta nos aparecerá un mensaje el cual dirá:
“¿Quiere insertar esta entrada al principio de la tabla de contenido?”. Presionamos en “Si”.
Con las flechas que aparen en la parte inferior, podemos ordenar el orden de las carpetas
Figura 12, Agregar Carpeta, y las carpetas agregadas.
Si se quiere ordenar el orden de las carpetas con las fechas de arriba y abajo, que aparecen
más abajo, se puede ir cambiando el orden de las carpetas.
Página | 8
Innovación y Desarrollo Para El Futuro
Ahora vamos a agregar los archivos HTML a las carpetas, para ello vamos a presionar el
botón que esta debajo de “agregar Carpetas” y una vez presionado nos desplegara una nueva
ventana, en la cual de vamos a un nombre a esa “Pagina”. Ver figura 13.
Figura 13, Agregar Pagina.
Una vez que le demos el “Titulo”, vamos a presionar el botón “Add…” y al momento de
presionarlo, vamos a seleccionar el archivo que querremos para esta página. En este caso
vamos a escoger el archivo “Capacitación – General”, y le damos en “OK” nos revolera a la
ventana anterior y presionamos el botón “Aceptar”. repetimos este proceso con todos los
archivos. Ver figura 14.
Figura 14, Agregar Pagina.
Página | 9
Innovación y Desarrollo Para El Futuro
Una vez agregado nos quedaran todos los archivos ubicados en la raíz (en el mismo nivel que
las carpetas), para corregir esto vamos a usar las flechas y vamos a ubicar cada uno de los
archivos en la carpeta correspondiente. Para realizar esto, vamos a bajar los archivos a sus
carpetas correspondientes con la “flecha abajo”, y para meterlas dentro de la carpeta vamos
a usar la “flecha derecha”. Ver figura 15.
Figura 15, Archivos en la raíz
→
Archivos dentro de las carpetas.
A continuación, vamos a cambiar el icono de las carpetas, para ellos, vamos a seleccionar
una carpeta (en este caso la carpeta “General”), y vamos a presionar el botón que aparece
debajo de “Agregar Pagina”. Ver figura 16.
Figura 16, Editar carpeta.
Página | 10
Innovación y Desarrollo Para El Futuro
Una vez desplegada la nueva ventana nos vamos a la pestaña de “Advanced” y una vez dentro
de la pestaña nos vamos a ubicar en la parte que dice “Image index:”, ubicados en esa parte
vamos a buscar el icono del libro con las flechas que aparecen al lado. Ver figura 17. Y
repetimos este proceso con las demás carpetas.
Figura 17, Ventana Advanced y los iconos cambiados.
A continuación, vamos a configurar la ventana que va a utilizar el usuario. Para ellos nos
regresamos a la pestaña Project y vamos a presionar el botón “Add/Modify window
definitions.” Ver figura 18.
Figura 18, Add/Modify Window definition
Página | 11
Innovación y Desarrollo Para El Futuro
Una vez presionado le vamos a dar un nombre a dicha ventana. En este caso le vamos a dar
el nombre “Ayuda Capacitación”. Y le damos en “OK”. Ver figura 19.
Figura 19, Nueva Window Type
Una vez presionado, se nos desplegara una nueva ventana. En la cual añadiremos una
pequeña descripción en donde dice “Title bar Text”. Una vez añadida la descripción, nos
dirigiremos a la pestaña “Navigation Pane” y una vez dentro vamos a marcar las carillas que
aparecen la sección “Tabs” Ver figura 20.
Figura 20, Descripción y Navigation Pane.
Una vez seleccionamos vamos a configurar cual será el archivo principal y cuáles serán los
secundarios, para ellos nos dirigiremos a la pestaña files. En este ejemplo se dejó de la
siguiente manera. Ver figura 21.
Página | 12
Innovación y Desarrollo Para El Futuro
Figura 21, Orden de los archivos.
Luego vamos a la pestaña “Buttons” y vamos a seleccionar todas las casillas. Y luego vamos
a añadir los nombres que añadimos en Files. Ver figura 22.
Figura 22, Pestaña Buttons.
Página | 13
Innovación y Desarrollo Para El Futuro
Para ir finalizando vamos a presionar el botón “Aceptar” y nos mostrara una serie de
ventanas, las cuales únicamente vamos a dar en “Siguiente” y por último en “Finalizar”.
Figura 23, Creación de la Window Definition.
Para finalizar lo que nos queda es compilar el proyecto, para ellos nos vamos a “Files →
Compile…”. Nos abrirá una nueva ventana la cual vamos a presionar el botón “Compile”.
Ver figura 24.
Página | 14
Innovación y Desarrollo Para El Futuro
Figura 24, Compilación de las ayudas.
Una vez dado en “Compile” el programa empezara a compilar las ayudas y nos aparecerá
una ventana dentro del programa en la cual mostrara un registro sobre la compilación y en
dado caso hubo algún error. Ver figura 25.
Figura 25, Log de la compilación.
Y Si vamos a ver a la carpeta en donde tenemos los archivos HTML, nos daremos cuenta de
que tenemos los archivos “.hhc”, “.hhp” y el más importa el “.chm”, el cual es de mucha
importancia para colocar las ayudas en C# y en Java. Ver figura 26.
Página | 15
Innovación y Desarrollo Para El Futuro
Figura 26, Carpeta de Ayudas.
Y una vez ya teniendo estos archivos ya podemos añadir las ayudas tanto en C# como en
Java.
Página | 16
Innovación y Desarrollo Para El Futuro
Ayudas en C#
Una vez obtenidas las ayudas con el HTML HELP WORKSHOP, nos dirigiremos al
programa, en este caso usaremos el mismo programa que utilizamos para la capacitación de
conexión con ODBC.
Para ellos nos vamos a ir a los archivos del proyecto y nos vamos a ir a la siguiente ruta:
Capacitación → Capacitación → bin → Debug
Y dentro de la carpeta “Debug”, vamos a colocar la carpeta de ayudas que hemos creado
anterior mente. Ver figura 28.
Figura 27, Carpeta Ayuda en la carpeta Debug Del programa.
Una vez agrega la carpeta, abrimos el programa y añadimos un botón, el cual tendrá la
función de que, al momento de presionarlo, nos despliegue la ventana de ayuda. Ver figura
27.
Página | 17
Innovación y Desarrollo Para El Futuro
Figura 28, botón Ayuda.
Damos doble clic en el botón, vamos a agregar la siguiente línea de código dentro del botón.
“Help.ShowHelp(this, "/*Ruta del archivo .chm*/", "/*Nombre del archivo HTML con su
extencion .html*/");”
Colocamos los parámetros que nos pide la línea de comandos, ver figura 29.
Figura 29, Ayudas Agregadas en C#.
Una vez agregado, vamos a compilar y ejecutar el programa, y al momento de presionar el
botón de ayuda nos desplegará una nueva ventana la cual tendrá las ayudas que hemos creado.
Ver figura 30.
Página | 18
Innovación y Desarrollo Para El Futuro
Figura 30, Ventana de Ayuda En C#.
Página | 19
Innovación y Desarrollo Para El Futuro
Ayudas en Java
Para agregar las ayudas en Java, se usará el proyecto que se utilizó para la capacitación de
conexión con JDBC, en el cual se creará un botón que servirá para llamar las ayudas. Ver
figura 31.
Figura 31, Proyecto de Ejemplo.
Para que podamos abrir los archivos vamos a necesitar importar la siguiente librería “import
java.io.File;” así como también se insertara el código correspondiente para abrir las ayudas,
el cual ira dentro del botón creado la dicha acción. Ver figura 32.
Página | 20
Innovación y Desarrollo Para El Futuro
Figura 32, Código del botón de la ayuda.
A diferencia de C#, aquí en Java únicamente tendremos que colocar el nombre del archivo
“.chm”, (Variaría dependiendo de cómo le coloquen el nombre). Colocaremos el nombre del
archivo que utilizamos para esta capacitación.
Otra diferencia que vamos a notar es que aquí vamos a colocar ya sea la ruta absoluta (Ruta
completa de la ubicación del archivo), lo cual es común ver en el desarrollo, pero es
considerado una mala práctica ya que, al momento de instalar el proyecto en otra máquina,
el programa no será capaz de encontrar el archivo. Ver figura 33.
Figura 33, Ruta Absoluta del archivo.
Sin embargo, funciona si colocamos la ruta absoluta.
Página | 21
Innovación y Desarrollo Para El Futuro
Ahora bien, para evitar este fallo, únicamente vamos a dejar el nombre del archivo “.chm”,
y además de ellos vamos a copiar el archivo dentro de la carpeta directa del proyecto. Ver
figura 34.
Figura 34, Archivo agregado a la carpeta del proyecto.
Una vez agregado el proyecto he indicado el archivo que tiene que buscar el proyecto en el
código (esto quitando toda la ruta y únicamente dejando el nombre del archivo con su
extensión), ya podrá abrir la ayuda sin la necesidad de tener la ruta absoluta. Ver figura 35.
Página | 22
Innovación y Desarrollo Para El Futuro
Figura 35, Ayuda en Java,
Página | 23
Innovación y Desarrollo Para El Futuro
